import React from 'react';
// import SiderMenu from './SiderMenu'
import BaseMenu from './BaseMenu';
import SystemMenu from './SystemMenu';
import { getFlatMenus } from './utils';

import memoizeOne from 'memoize-one';
import isEqual from 'lodash/isEqual';
import { checkRouteAuth } from '@/components/Authorized';

const formatter = (data, authorities) => {
  return (data || [])
    .map(item => {
      const _item = {
        ...item,
      };
      if (item.routes) {
        const children = formatter(item.routes, authorities);
        _item.children = children;
      }
      delete _item.routes;
      return _item;
    })
    .filter(item => item && item.name && item.path)
    .filter(item => checkRouteAuth(authorities)(item.authority));
};
export const formatterData = memoizeOne(formatter, isEqual);

const SiderMenuWrapper = React.memo(props => {
  const { menu, subMenu } = props;
  // const flatMenus = getFlatMenus(menu, item => item.system === system)
  const flatMenus = getFlatMenus(menu, item => item);
  const flatMenuKeys = Object.keys(flatMenus);
  const SiderMenu = subMenu ? BaseMenu : SystemMenu;
  return <SiderMenu {...props} flatMenuKeys={flatMenuKeys} flatMenus={flatMenus}></SiderMenu>;
});

export default SiderMenuWrapper;
